<template>
  <div class="zy-content">
    <div class="searchBox search-box-layout">
      <Row :gutter="24">
        <Col span="4">
          <div>
            <p class="label">{{ $t('流程单号') }}</p>
            <div class="ipt">
              <Input clearable type="text" v-model="params.capexNo"
                     :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                     :maxlength="32"></Input>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{ $t('项目ID') }}</p>
            <div class="ipt">
              <Input clearable type="text" v-model="params.projectId"
                     :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                     :maxlength="32"></Input>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{ $t('资产编号') }}</p>
            <div class="ipt">
              <Input clearable type="text" v-model="params.assetNo"
                     :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                     :maxlength="32"></Input>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{ $t('项目负责人') }}</p>
            <div class="ipt">
<!--                            <Input clearable type="text" v-model="params.responsible"-->
<!--                                   :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"-->
<!--                                   :maxlength="32"></Input>-->
              <Select v-model="params.responsible" filterable clearable
                      :placeholder="$t('common.inputInfo')"
                      :remote-method="handleRemote"
              >
                <Option v-for="(item, i) in userList"
                        :value="item.id"
                        :label="item.realname+'-'+item.empno"
                        :key="i">
                </Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{ $t('状态') }}</p>
            <div class="ipt">
              <Select
                  v-model="params.orderProcessStatus"
                  filterable
                  clearable
                  :placeholder="`${$t('common.selectInfo')}`"
                  class="Input-wrapper"
              >
                <Option v-for="(item,index) of statusList"
                        :value="item.value"
                        :key="index"
                        :label="item.label">
                </Option>
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label hide-label">--</p>
            <div class="ipt">
              <Button type="primary" v-has="'capex_search'" class="search-btn" @click="search">{{
                  $t('common.Query')
                }}
              </Button>
              <Button class="reset-btn" v-has="'capex_search'" @click="reset">{{ $t('common.reset') }}</Button>
            </div>
          </div>
        </Col>
      </Row>
    </div>
    <div class="list-layout mt16">
      <div class="btns clear">
        <span class="title">{{ $t('common.listInformation') }}</span>
        <Button @click="addHandle" v-has="'capex_add'">
          {{ $t("新增") }}
        </Button>
        <Button @click="exportFile" v-has="'capex_export'">
          {{ $t("导出") }}
        </Button>
      </div>
      <div class="tableContent">
        <Table ellipsis ref="selection" :border="false" :columns="columns" :data="dataSource"
               @on-selection-change="handleSelectionChange">
          <template slot-scope="{ row }" slot="action">
                <span v-has="'capex_view'" class="operationBtn" @click="viewHandle(row)">
                             <i class="iconfont zy-common-chakan"></i>
                            {{ $t('查看') }}
                        </span>
          </template>
          <template slot-scope="{ row }" slot="progressCode">
            <ul class="process-list">
              <li :class="{left: item.status === 1,center: item.status === 2,right: item.status === 3}"
                  v-for="(item,index) in row.processList" :key="index">
                <Tooltip placement="top" :transfer="true" :content="item.name">
                  <i class="iconfont" :class="item.icon"></i>
                </Tooltip>
              </li>
            </ul>
          </template>
          <template slot-scope="{ row }" slot="orderProcessStatus">
            <span
                :class="{closed:row.orderProcessStatus == 1,onGoing:row.orderProcessStatus == 0,}"></span>{{ row.orderProcessStatusName }}
          </template>
        </Table>
      </div>
      <div class="pageWrap mt16">
        <pageLeftTitle :total="total"/>
        <Page :total="total" :page-size="params.pageSize" :current="params.pageNum"
              @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from './components/mixins'
import fileDownload from "js-file-download";

export default {
  name: "index",
  mixins: [mixins],
  data() {
    return {
      params: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      dataSource: [],
      columns: [
        {
          type: 'selection',
          align: 'center',
          fixed: 'left'
        },
        {
          title: this.$t('流程单号'),
          align: 'center',
          tooltip: true,
          key: "capexNo",
          width: 150
        },
        {
          title: this.$t('项目ID'),
          align: 'center',
          tooltip: true,
          key: "projectId",
          width: 150
        },
        {
          title: this.$t('资产编号'),
          align: 'center',
          tooltip: true,
          key: "assetNo",
          width: 150

        },
        {
          title: this.$t('项目负责人'),
          align: 'center',
          tooltip: true,
          key: "projectOwnerStr",
          width: 150
        },
        {
          title: this.$t('项目名称'),
          align: 'center',
          tooltip: true,
          key: "projectName",
          width: 150
        },
        {
          title: 'OPM',
          align: 'center',
          tooltip: true,
          key: "factoryOwnerName",
          width: 150
        },
        {
          title: this.$t('状态'),
          align: 'center',
          tooltip: true,
          key: "orderProcessStatusName",
          width: 150,
          slot: "orderProcessStatus"
        },
        {
          title: this.$t('预算范围'),
          align: 'center',
          tooltip: true,
          key: "budgetReachStr",
          width: 260
        },
        {
          title: this.$t('项目类型'),
          align: 'center',
          tooltip: true,
          key: "projectTypeListName",
          width: 150
        },
        {
          title: this.$t('流程'),
          align: 'center',
          tooltip: true,
          key: "progressCode",
          width: 600,
          slot: "progressCode"
        },
        {
          title: this.$t('预算层级金额'),
          align: 'center',
          tooltip: true,
          key: "crovBdgWobdg",
          width: 220
        },
        {
          title: this.$t('实际批复'),
          align: 'center',
          tooltip: true,
          key: "actualTotalApproved",
          width: 180
        },
        {
          title: this.$t('已拨款'),
          align: 'center',
          tooltip: true,
          key: "paid",
          width: 150
        },
        {
          title: this.$t('预算余额'),
          align: 'center',
          tooltip: true,
          key: "budgetAvailability",
          width: 150
        },
        {
          title: this.$t('操作'),
          slot: "action",
          minWidth: 100,
          align: "center",
          fixed: 'right'
        }
      ],
      ids: [],
      userList: []
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    handleRemote(query) {
      if (query !== "") {
        return this.axios({
          method: "get",
          url: "/dms/user/userList",
          params: {
            key: query
          },
        }).then((res) => {
          if (res.code === 200) {
            this.userList = res.data
          } else {
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            });
          }
        })
      } else {
        this.numberList = [];
      }
    },
    addHandle() {
      this.$router.push({
        path: '/devBasic/capexOperation',
        query: {
          type: "add"
        }
      })
    },
    exportFile() {
      let params = this.params;
      this.axios({
        method: 'get',
        url: 'dms/capex/export',
        responseType: 'blob',
        params: {
          ...params
        }
      }).then(res => {
        // if (res.code === 200) {
        fileDownload(res, "我的代办" + '.xlsx')
        // }
      })
    },
    viewHandle(row) {
      this.$router.push({
        path: '/devBasic/capexOperation',
        query: {
          type: "view",
          id: row.id,
          mainIdTag: row.mainIdTag,
          mainId: row.mainId
        }
      })
    },
    getList() {
      let params = this.params;
      this.axios({
        method: 'post',
        // url: '/dms/capex/portalStatisticsList',
        url: '/dms/capex/list',
        data: {
          ...params,
          // projentType:this.$route.query.projentType,
          // projentStatusType:this.$route.query.projentStatusType
        }
      }).then(res => {
        if (res.code === 200) {
          const {list, total} = res.data;
          this.dataSource = list.map(item => {
            const projectTyp = this.projectTypeList.find(m => m.value == item.projectType)
            const orderProcessStatus = this.statusList.find(m => m.value == item.orderProcessStatus)
            const obj = this.budgetList.find(m => m.value == item.budgetReach / 1)
            item.projectTypeListName = projectTyp.label;
            item.orderProcessStatusName = orderProcessStatus.label;
            if (obj)
              item.budgetReachStr = obj['label']

            // const processList = this.formatProcessList(item.progressCode, [], item.orderProcessStatus)

            const _processList = this.formatProcessList(item.progressCode, [], item.orderProcessStatus,item.satIsRequired,item.twoPaymentBeforeCat)
            const activeCodeObj = _processList.find(processItem=> processItem.key.includes(item.progressCode))

            if (this.processList.indexOf(activeCodeObj) !== _processList.length - 1 && item.progressCode === activeCodeObj.key[activeCodeObj.key.length-1] && item.progressCode !=='Post Calculation'){
              item.progressCode = _processList[_processList.indexOf(activeCodeObj)+1].key[0]
            }

            const processList = this.formatProcessList(item.progressCode, [], item.orderProcessStatus)

            // let defaultProcessList = JSON.parse(JSON.stringify(this.processList))
            let defaultProcessList = _processList
            const capexSubmitPos = item.capexSubmitPos;
            const subProjectCode = []

            if (Array.isArray(capexSubmitPos) && capexSubmitPos.length > 0) {
              for (let i = 0; i < capexSubmitPos.length; i++) {
                const code = capexSubmitPos[i].progressCode
                if (!code) {
                  subProjectCode.push('Bidding')
                } else {
                  const subCodeObj = defaultProcessList.find(subItem => subItem.key.includes(code))
                  // if (subCodeObj && subCodeObj.progressCode !== 'Capitalization Approval') {
                  //   const objProcess = defaultProcessList[defaultProcessList.indexOf(subCodeObj) + 1]
                  //   subProjectCode.push(objProcess.key[0])
                  // }

                  if (subCodeObj && subCodeObj.progressCode !== 'Capitalization Approval' && subCodeObj.key[subCodeObj.key.length-1]===code){
                    const objProcess = defaultProcessList[defaultProcessList.indexOf(subCodeObj) + 1]
                    subProjectCode.push(objProcess.key[0])
                  }else{
                    const objProcess = defaultProcessList[defaultProcessList.indexOf(subCodeObj)]
                    subProjectCode.push(objProcess.key[0])
                  }
                }
              }
            }

            let subProjectCodeIndex = 0

            if (subProjectCode.length > 0)
              item.processList = processList.map(m => {
                if (item.orderProcessStatus === 1){
                  m.status = 1
                }else{
                  const arr = subProjectCode.filter(ms => m.key.includes(ms))
                  if (arr.length > 0) {
                    for (let i=0;i<arr.length;i++){
                      m.status = 2
                      subProjectCodeIndex++
                    }
                  }
                  if (subProjectCodeIndex > 0 && subProjectCodeIndex < subProjectCode.length) {
                    m.status = 2
                  }
                  if (subProjectCodeIndex === 0) {
                    m.status = 1
                  }
                }

                return m;
              })

            else
              item.processList = processList

            const {crovBdgWobdg,actualTotalApproved,paid,budgetAvailability} = item;
            item.crovBdgWobdg = this.util.thousandth(crovBdgWobdg)
            item.actualTotalApproved = this.util.thousandth(actualTotalApproved)
            item.paid = this.util.thousandth(paid)
            item.budgetAvailability = this.util.thousandth(budgetAvailability)

            return item;
          })
          this.total = total;
        }
      })
    },
    reset() {
      this.params = {
        pageNum: 1,
        pageSize: 20
      }
      this.getList()
    },
    search() {
      this.params.pageNum = 1
      this.getList()
    },
    changePageNum(val) {
      this.params.pageNum = val
      this.getList()
    },
    changePageSize(val) {
      this.params.pageSize = val
      this.getList()
    },
    handleSelectionChange() {

    }
  }
}
</script>

<style scoped lang="scss">
.process-list {
  li {
    width: 25px;
    height: 25px;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    font-size: 15px;
    font-weight: bold;
    border: #035BEC solid 1px;
    color: #035BEC;
    margin-right: 10px;
    position: relative;
    text-align: center;
    line-height: 25px;

    i {
      text-align: center;
      line-height: 25px;
      color: #035BEC;
      padding-right: 0 !important;

    }

    &:before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 1px;
      position: absolute;
      top: 12px;
      left: 24px;
      background: #035BEC;
    }

    &:last-child {
      &:before {
        display: none;
      }
    }

    &.center {
      border: #00E6F4 solid 1px;
      color: #00E6F4;

      i {
        color: #00E6F4;
      }

      &:before {
        background: #00E6F4;
      }
    }

    &.right {
      border: rgba(51, 65, 100, 0.5) solid 1px;
      color: rgba(51, 65, 100, 0.5);

      i {
        color: rgba(51, 65, 100, 0.5);
      }

      &:before {
        background: rgba(51, 65, 100, 0.5);
      }
    }
  }
}

.closed {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background: #cccccc;
  vertical-align: middle;
  margin-right: 5px;
}

.onGoing {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background: green;
  vertical-align: middle;
  margin-right: 5px;
}
</style>
